<template>
  <div class="messageBoxFather">

    <div class="screenBox">

      <div class="messageBox" ref="messageRef" id="ddddqq" v-if="messageData" @scroll="throttleFn">
        <div class="loadingBoxbottom" style="color:#2196f3;cursor: pointer;" @click="loadMoreData"><i :class="loadClass2"
            style="color:#2196f3"></i> {{ loadingText2 }}</div>


        <!-- 系统消息提示区 -->
        <div v-for="(item, index) in messageData" :key="index">
          <!-- ******************************************* 接收区 ******************************************************* -->
          <!-- <div v-if="item.msgtype == -1012" class="chat-sender" id="systemTips"
            style="margin-bottom:.2rem;margin-top:10px;">
            {{$t('wechat.systemTip')}}：{{ item.contant }}
          </div>
          <div v-else-if="item.msgtype == 10000 || item.msgtype == 10002 || item.msgtype == 570425393" class="chat-sender"
            id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
            {{ formateHongBaoSystem(item) }}
          </div>

          <div v-else-if="item.msgtype == 268445456" class="chat-sender" id="systemTips"
            style="margin-bottom:.2rem;margin-top:10px;">
            {{ item.contant }}
          </div> -->
          <!-- left -->
          <div v-if="item.issend == 0">

            <!-- Left --> <!-- 文本 -->
            <div class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position: relative;">
                <img v-if="item.contactavatar" :src="item.contactavatar" />
                <img v-else src="../../../assets/images/otherApp/user.png" />
                <div v-if="startPrint"
                  style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button
                    @click="handleClickPrint(item, $event)" size="small" type="text">添加</el-button></div>
              </div>
              <div>{{ item.send_username }}<span style="margin-left:.05rem;">{{
                formDate(item.send_time) }}</span> <span style="color:red;" v-if="item.recover == 1"><i
                    style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span>
              </div>
              <div>
                <div class="chat-left_triangle"></div>
                <!-- 视频分享 -->
                <p v-if="formateTikTokMessage(item.content).aweType == 800" class="itemTikTok">
                  <img width="240" height="400" v-if="formateTikTokMessage(item.content).aweType == 800"
                    :src="formateTikTokMessage(item.content).cover_url.url_list[formateTikTokMessage(item.content).cover_url.url_list.length - 1]"
                    alt="">
                  <span class="videoContent">{{ formateTikTokMessage(item.content).content_name }}</span><br>
                  <span class="videoContent">{{ formateTikTokMessage(item.content).content_title }}</span>

                </p>
                <span
                  v-else-if="formateTikTokMessage(item.content).aweType == 700 || formateTikTokMessage(item.content).aweType == 0 || formateTikTokMessage(item.content).aweType == 701">
                  <span>{{ formateTikTokMessage(item.content).text ? formateTikTokMessage(item.content).text :
                    formateTikTokMessage(item.content).tips }}</span>
                </span>
                <span v-else-if="formateTikTokMessage(item.content).text">
                  <span>{{ formateTikTokMessage(item.content).text }}</span>
                </span>
                <span @click="showInfo(item.content)" v-else-if="formateTikTokMessage(item.content).aweType == 2702">
                  <span class="unKonw">无法解析(点击查看消息详情)</span>
                </span>
                <span v-else style="word-wrap:break-word;width:200px;">
                  {{ item.content }}
                </span>
                <!-- 显示图片 -->
                <!-- <div v-if="">
                  <div style="width:100px;height: 100px;display: inline-block;">
                    <img style="object-fit: cover;width: 100%;height: 100%;" src="https://pic35.photophoto.cn/20150511/0034034892281415_b.jpg">
                  </div>
                </div> -->
                <div class="badgeBox" v-if="item.cntRemark > 0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini"
                  style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">标记
                </el-button>
              </div>
            </div>
          </div>
          <!-----------------------------------------  发 送 区  --------------------------------------->
          <div v-else>
            <!-- Right --> <!-- 发送气泡 -->
            <div class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img src="../../../assets/images/otherApp/userBlue.png" />
                <div v-if="startPrint"
                  style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button
                    @click="handleClickPrint(item, $event)" size="small" type="text">添加</el-button></div>
              </div>
              <div>{{ item.send_username }}<span style="margin-left:.05rem;">{{
                formDate(item.send_time) }}</span> <span style="color:red;" v-if="item.recover == 1"><i
                    style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span>
              </div>
              <div>
                <div class="chat-right_triangle"></div>
                <p v-if="formateTikTokMessage(item.content).aweType == 800" class="itemTikTok">
                  <img width="240" height="400" v-if="formateTikTokMessage(item.content).aweType == 800"
                    :src="formateTikTokMessage(item.content).cover_url.url_list[formateTikTokMessage(item.content).cover_url.url_list.length - 1]"
                    alt="">
                  <span class="videoContent">{{ formateTikTokMessage(item.content).content_name }}</span><br>
                  <span class="videoContent">{{ formateTikTokMessage(item.content).content_title }}</span>
                </p>
                <span
                  v-else-if="formateTikTokMessage(item.content).aweType == 700 || formateTikTokMessage(item.content).aweType == 0 || formateTikTokMessage(item.content).aweType == 701">
                  <span>{{ formateTikTokMessage(item.content).text ? formateTikTokMessage(item.content).text :
                    formateTikTokMessage(item.content).tips }}</span>
                </span>
                <span v-else-if="formateTikTokMessage(item.content).text">
                  <span>{{ formateTikTokMessage(item.content).text }}</span>
                </span>
                <span @click="showInfo(item.content)" v-else-if="formateTikTokMessage(item.content).aweType == 2702">
                  <span class="unKonw">无法解析(点击查看消息详情)</span>
                </span>
                <span v-else style="word-wrap:break-word;width:200px;">
                  {{ item.content }}
                </span>
                <div class="badgeBox" v-if="item.cntRemark > 0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini"
                  style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
          </div>


        </div>
        <div class="loadingBoxbottom" v-if="showLoading" style="color:#2196f3"><i :class="loadClass"
            style="color:#2196f3"></i> {{ loadingText }}
        </div>

      </div>
      <a-affix :offset-bottom="0">
        <el-button type="primary" style="" @click="printPdf" v-if="startPrint">{{$t('wechat.startDaYin')}}</el-button>
        <el-button style="" @click="closePrintFunction" v-if="startPrint">{{$t('wechat.close')}}</el-button>

      </a-affix>
    </div>

    <!-- 查看语音包Message详情 -->
    <a-modal title="语音详情" :maskClosable="false" :footer="null" width="50%" :visible="visibleAudio"
      :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
      <div class="audioBox">
        <div class="AudioLogo">
          <img width="100%" height="100%" src="../../../assets/images/weChatQQ/cipan.png" alt="">
          <i id="playAudio" :class="icon" title="点击播放" @click="playAudioFile"></i>
        </div>
        <div class="pathBox">
          <div class="itemAudio bottomBorder" style="border-top-right-radius: 5px;">
            文件名称：-语音12345787654
          </div>
          <div class="itemAudio" style="border-bottom-right-radius: 5px;">
            本地路径：C:\Users\han\Desktop\ff5dfb8838d9acfc7eefff669166094e.mp4
          </div>
        </div>
      </div>
      <div style="padding-left:2%;font-size:12px;margin-top:5px;color:#ccc;">点击左侧按钮播放视频</div>
    </a-modal>
    <!-- 查看转发聊天记录详情 -->
    <a-modal :maskClosable="false" :footer="null" :title="MessageFriendTitle" :width="500"
      :visible="MessageFriendContentVisible" @ok="handleOkMessageFriend" @cancel="handleCancelMessageFriend">
      <div class="listBox">
        <div class="chatRecord" v-for="(item, index) in messageRDataList" :key="index">
          <div class="friendAvatar">
            <img style="width:70%;height:70%;" src="../../../assets/images/weChatQQ/chartImg.png" alt="">
          </div>
          <div>

          </div>
          <div class="" style="background:#efeeee;padding:10px;border-radius:10px;" v-if="(item.msg instanceof Array)">

            <p style="">{{ item.sourcename }} 转发聊天记录</p>
            <div style="width:350px;border-bottom:1px solid#fff;padding-top:15px;" v-for="(i, j) in item.msg" :key="j">
              <div v-if="(i.msg instanceof Array)">
                <p style="margin-bottom:10px;">{{ i.sourcename }} 转发聊天记录中的转发聊天记录</p>
                <div v-for="(x, y) in i.msg" :key="y">
                  <div style="padding-left:20px;">
                    <p>{{ x.sourcename }}：{{ x.msg }}</p>
                    <p style="margin-bottom:15px;">{{ x.time }}</p>
                  </div>
                </div>
              </div>
              <div v-else style="padding-left:20px;">
                <p>{{ i.sourcename }}：{{ i.msg }}</p>
                <p style="margin-bottom:15px;">{{ i.time }}</p>
              </div>
            </div>
          </div>
          <div class="chatRecordContent" v-else>
            <div class="chatRecordContentLeft">
              <div class="friendNames" style="font-size:13px;color:#898989d9;">{{ item.sourcename }}</div>
              <div class="friendNames friendNamesContent" style="font-size:1000;" title="详情提示">{{ item.msg }}</div>
            </div>
            <div class="chatRecordDate">{{ item.time }}</div>
          </div>
        </div>

      </div>

    </a-modal>
    <!-- 查看推荐好友名片 -->
    <a-modal v-model="modal2Visible" :footer="null" title="个人名片" centered @ok="() => (modal2Visible = false)">
      <div class="cardContent">
        <img width="100px" height="100px" :src="card._bigheadimgurl" alt="">
        <div class="cardTextInfo" v-if="card">
          <p style="font-weight:1000;display:flex;align-items:center;font-size:20px;">{{ card._nickname }}</p>
          <p>昵称:{{ card._fullpy }}</p>
          <p v-if="card._sex == 1">性别:男</p>
          <p v-else-if="card._sex == 2">性别:女</p>
          <p v-else>性别:未知</p>
          <p>地区:{{ card._province }}-{{ card._city }}</p>
        </div>
      </div>

    </a-modal>
    <!-- 无法解析消息类型详情 -->
    <a-modal v-model="erroMessageModel" :getContainer="getRefsAff" :footer="null" title="消息详情" centered
      @ok="() => (erroMessageModel = false)">
      <div v-if="unKnowData">
        {{ unKnowData }}
      </div>
    </a-modal>

    <a-modal width="300px" v-model="showRemark" :getContainer="getRefsAff" :maskClosable="false" title="提示"
      @ok="handleOk11">
      <p>{{$t('wechat.biaojibeizhu')}}</p>
      <p><el-input type="textarea" v-model="remark"></el-input></p>
    </a-modal>


    <!--打印窗口 -->
    <a-modal width="300px" v-model="showPrint" :getContainer="getRefsAff" :maskClosable="false" title="选择打印方式"
      @ok="printOk">
      <el-radio-group v-model="formResource">
        <el-radio label="打印所有已读" style="margin-bottom:10px;font-size:18px;"></el-radio>
        <el-radio label="手动添加已读打印" style="margin-bottom:10px;font-size:18px;"></el-radio>
        <el-radio label="截图当前可视区域" style="margin-bottom:10px;font-size:18px;"></el-radio>
      </el-radio-group>
    </a-modal>
  </div>
</template>
<script>

import position from '../map/position.vue'
import { searchFunction } from '@/api/otherApi/otherApp_api'
import { parseTime } from '@/utils/index'
import { sendMarkOrderApi } from '@/api/markApi/index'
import { throttle } from 'lodash';

const x2js = require('x2js');
const x2jsone = new x2js(); //实例

import ScreenShort from "js-web-screen-shot";

export default {
  props: ['chatWithObj', 'accountData', 'recover', 'offsetLimit'],
  name: "otherMessage",
  components: {
    position
  },
  data() {
    return {
      stopAppendMessageData: false,
      printArray: [],
      startPrint: false,
      formResource: "打印所有已读",
      showPrint: false,
      msgtime: 0,

      selectld: -1,
      selectType: 0, //0下1上
      selectTime: -1,
      isExistsSelectID: 0,

      showTime: false,
      showDetails: true,
      loadClass: 'el-icon-loading',
      loadingText: '正在加载. . .',
      showLoading: false,

      loadClass2: 'el-icon-refresh-left',
      loadingText2: '点击加载更多',
      showLoading2: false,

      showRemark: false,
      remark: '',
      id: '',
      searchWord: '',
      card: '',
      messageRDataList: [],
      offset: 1,
      limit: 20,
      form: {
        type: [],
        delivery: ''
      },
      unKnowData: '',
      total: 0,
      self: require('../../../assets/images/otherApp/userBlue.png'),
      messageData: [],
      erroMessageModel: false,
      modal2Visible: false,
      MessageFriendContentVisible: false,
      MessageFriendTitle: '聊天记录',
      icon: 'el-icon-video-play',
      visibleAudio: false,
      confirmLoading: false,
      url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F512%2F0PQ2123I9%2F120PQ23I9-10-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646980202&t=e8f5aecc7763071d76513929b701069d',
      srcList: [],
      usernameMark: ''
    }
  },
  watch: {
    '$store.state.account.otherdata': function () {
      if (this.offsetLimit.msg_offset) {
        this.offset = this.offsetLimit.msg_offset;
        this.selectld = this.offsetLimit.id;
        this.selectTime = this.offsetLimit.msgtime;
        this.isExistsSelectID = 1;
      } else {
        this.offset = 1
        this.total = 0

        this.selectld = -1
        this.selectType = 0//0下1上
        this.selectTime = -1
        this.isExistsSelectID = 0
      }
      this.loadClass2 = 'el-icon-refresh-left';
      this.loadingText2 = '点击加载更多！';
      this.messageData = []
      this.onSearch()
    }
  },

  created() {
    if (this.offsetLimit.msg_offset) {
      this.offset = this.offsetLimit.msg_offset
    } else {
      this.offset = 1
      this.total = 0
    }
    this.onSearch()
  },
  methods: {
    closePrintFunction() {
      this.stopAppendMessageData = true;
      this.storeArray = [];
      this.showBiaoJi = false;
      this.stopAppendMessageData = false;
      this.startPrint = false;
    },
    loadMoreData() {
      const list = this.$refs.messageRef;

      this.loadClass2 = 'el-icon-loading';
      this.loadingText2 = '正在加载. . .';
      let len = this.messageData.length;
      this.selectld = this.messageData.length ? this.messageData[0].id : '';
      this.selectTime = this.messageData.length ? this.messageData[0].msgtime : "";
      this.selectType = 1;
      this.isExistsSelectID = 1;
      // if(this.messageData.length>=100){
      //   this.messageData.splice(100,this.messageData.length-1)
      // }
      this.scrollTop = list.scrollTop;
      this.onSearchShift();

    },
    throttleFn: throttle(function () {
      // 获取列表元素
      const list = this.$refs.messageRef;
      if (list.scrollTop == 0 && list.scrollHeight == 0) return;

      // 判断滚动到底部
      if (list.scrollTop + list.clientHeight + 10 + 10 >= list.scrollHeight) {

        // if(this.messageData.length>200){
        //   this.messageData.splice(0, 100);
        // }

        this.showLoading = true;
        if (this.messageData.length < this.total) {
          this.scrollTop = list.scrollTop;
          this.loadClass = 'el-icon-loading';
          this.loadingText = '正在加载. . .';
          let len = this.messageData.length;
          this.selectld = this.messageData[len - 1].id;
          this.selectTime = this.messageData[len - 1].msgtime;
          this.selectType = 0;
          // if(this.messageData.length>=100){
          //   this.messageData.splice(0,(this.messageData.length-1)-100)
          // }
          // this.$refs.messageRef.scrollTop = 10;
          this.offset+=1
          if(this.offset >  Math.ceil(this.total / 20)){
              this.loadClass = 'el-icon-success';
              this.loadingText = '到底了，没有更多了！';
            return
          }
          this.onSearch();
        }
        else {
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
        }
      }

    }, 1000),
    handleOk11() {
      // return
      let data = {
        navigation_list: sessionStorage.getItem('arr').split(','),
        model: 'other_app',
        isChat: 1,
        username: this.chatWithObj.username,
        app_name: 'Facebook',
        account_id: this.chatWithObj.account_id,
        proof_num: this.chatWithObj.proof_num,
        list_offset: this.offsetLimit.offset,
        list_limit: this.offsetLimit.limit,
        remark: this.remark,
        class: 'Facebook',
        label: this.offsetLimit.label,
        msg_offset: this.offset,
        id: Number(this.id),
        msgtime: this.msgtime,
        contact_username: this.usernameMark
      }
      sendMarkOrderApi(data).then(res => {
        this.showRemark = false;
        this.$message({
          message: '标记数据成功！',
          type: 'success'
        });
        this.messageData = []
        this.onSearch()
      })
    },
    // 添加标记点
    markOrder(item) {
      this.id = item.id;
      this.msgtime = item.msgtime;
      this.usernameMark = item.contactname;
      this.showRemark = true;
    },
    openNews(src) {
      window.open(src)
    },
    getRefsAff() {
      return this.$refs.messageRef
    },
    showInfo(item) {
      this.erroMessageModel = true
      this.unKnowData = item
    },
    formateTikTokMessage(content) {
      if (content === '') {
        let data = {
          type: 77777777
        }
        return data
      } else {
        try {
          return JSON.parse(content)

        } catch (error) {
          let data = {
            type: 77777777
          }
          return data
        }
      }
    },
    onSearchStart() {
      this.messageData = []
      this.offset = 1
      this.onSearch()
    },

    formateYinyongMessage(item) {
      let data = JSON.parse(item)
    },
    // 格式化转发聊天记录
    messageRemrd(item) {
      let reg = /\\/g;
      let str = item.replace(reg, '');
      return JSON.parse(str)
    },
    // 打开文件
    downLoadFile(path) {
      let data = {
        filePath: path
      }
      openFilePosition(data).then(res => {

      })

    },
    // 格式化位置信息
    formdatePosition(item) {
      let xml = item.contant,
        xmlDo = x2jsone.xml2js(xml);
      try {
        return xmlDo.msg.location
      } catch (err) {

      }
    },
    // 格式化名片分享
    formateCard(item) {
      let xml = item.contant,
        xmlDo = x2jsone.xml2js(xml);
      return xmlDo
    },
    //格式化语音通话
    formateAudioCall(item) {
      try {
        if (item.contant.indexOf('recvtime') > 0 && item.contant.split('<invitetype>')[1].split("</invitetype>")[0] == 0) {
          let data = {
            text: '视频通话-时长' + item.contant.split('<duration>')[1].split("</duration>")[0] + '秒',
            icon: 'el-icon-video-camera'
          }
          return data
        } else {
          let data = {
            text: '语音通话-时长' + item.contant.split('<duration>')[1].split("</duration>")[0] + '秒',
            icon: 'el-icon-phone-outline'
          }
          return data
        }
      } catch (err) {
      }
    },
    // 格式化红包
    formateHongBao(item) {
      let xml = item.contant,
        xmlDo = x2jsone.xml2js(xml);
      return xmlDo
    },
    // 收红包
    formateHongBaoSystem(item) {
      if (item.contant.indexOf('img') == -1) {
        return item.contant
      } else {
        return item.contant.replace(/[^\u4e00-\u9fa5]/gi, "")
      }
    },
    // 格式化图片路径
    formateImg(item) {
      let xml = item.contant,
        xmlDo = x2jsone.xml2js(xml);
      if (item.respath == '') {
        try {
          try {
            return xmlDo.msg.emoji._cdnurl
          } catch (err) {
            // return
          }
        } catch (exception) {

        }
      } else {
        return item.respath
      }
    },
    formDate(date) {
      return parseTime(date)
    },
    openPrintHtml() {
      this.showPrint = true;
    },
    handleClickPrint(item, event) {
      if (event.srcElement.innerHTML == '添加') {
        event.srcElement.innerHTML = '√已添加';
        event.srcElement.style.color = 'red';
        event.srcElement.style.fontWeight = '1000';
        this.printArray.push(item);
      } else {
        event.srcElement.innerHTML = '添加';
        event.srcElement.style.color = '#409EFF';
        event.srcElement.style.fontWeight = '500';
        const index = this.printArray.indexOf(item);
        if (index !== -1) {
          this.printArray.splice(index, 1);
        }
      }
    },
    //打印
    printPdf(index, row) {
      this.startPrint = false;
      let storeArray = this.messageData;
      if (this.formResource == '手动添加已读打印') {
        this.messageData = this.printArray;
        this.messageData = this.messageData.sort((a, b) => parseInt(b.msgtime) - parseInt(a.msgtime));
      }
      // this.$print(this.$refs.print) // 使用
      let dom = this.$refs.messageRef
      dom.style['box-shadow'] = "none"
      dom.style['overflow-y'] = "visible"
      let focuser = setInterval(() => window.dispatchEvent(new Event('focus')), 500);

      let that = this;
      setTimeout(() => {
        printJS({
          printable: 'ddddqq',
          type: 'html',
          documentTitle: '',
          // css:'../../../styles/weChat.css',
          //properties: [
          //    { field: 'name', displayName: '姓名', columnSize:`50%`},
          //    { field: 'sex', displayName: '性别',columnSize:`50%`},
          //],
          // header: ``,
          // style:'',
          // gridHeaderStyle:'font-size:12px; padding:3px; border:1px solid; font-weight: 100; text-align:left;',
          // gridStyle:'font-size:12px; padding:3px; border:1px solid; text-align:left;',
          // repeatTableHeader: true,
          // scanStyles:false,
          targetStyles: ['*'],
          ignoreElements: ['no-print', 'bc', 'gb'],
          onPrintDialogClose: () => {//取消打印回调
            clearInterval(focuser);
            dom.style.height = "98vh"
            dom.style['overflow-y'] = "auto"
            that.messageData = storeArray;
          }
        })
      }, 1000)

    },
    printOk() {
      this.showPrint = false;
      if (this.formResource == '手动添加已读打印') {
        this.stopAppendMessageData = true;
        this.scrollTop = this.$refs.messageRef.scrollTop;
        this.startPrint = true;
        this.printArray = [];
        return
      } else if (this.formResource == '截图当前可视区域') {
        this.startPrint = false;
        new ScreenShort({
          enableWebRtc: true, // 是否启用webrtc，值为false则使用html2canvas来截图
          loadCrossImg: true, // 跨域
          level: 999999999999999, // 层级
          // dpi: currentScale, // 设置 DPI
          // clickCutFullScreen:false,
          // wrcWindowMode:true

        });
      } else {
        this.startPrint = false;
        setTimeout(() => {
          this.printPdf();
        }, 2000)
      }
    },
    flayRemark(item) {
      this.messageData = [];
      let data = {
        recovery: this.recover,
        proof_num: this.chatWithObj.proof_num,
        account_id: Number(this.accountData.account_id),
        model: 'other_app',
        username: this.chatWithObj.username,
        searchkey: this.searchWord,
        offset: this.offset,
        limit: this.limit,
        selectType: this.selectType, //0下1上
        selectTime: item.msgtime,
        isExistsSelectID: 1,
        chatContentID: item.id
      }
      searchFunction(data, '/search/chat/content_new').then(res => {
        if (res.data.length == 0) {
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
          return
        }
        try {
          // this.$refs.messageRef.scrollTop=0
          for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index];
            this.messageData.push(element);
          }
          this.total = res.data[0].cnt
        } catch (error) {

        }

      })
    },
    onSearchShift() {
      let data = {
        recovery: this.recover,
        proof_num: this.chatWithObj.proof_num,
        account_id: Number(this.accountData.account_id),
        model: 'other_app',
        username: this.chatWithObj.username,
        searchkey: this.searchWord,
        offset: this.offset,
        limit: this.limit,
        selectType: this.selectType, //0下1上
        selectTime: this.selectTime,
        isExistsSelectID: 1,
        chatContentID: Number(this.selectld)
      }
      const scrollTop = this.$refs.messageRef.scrollHeight;
      searchFunction(data, '/search/chat/content_new').then(res => {
        if (res.data.length == 0) {
          this.loadClass2 = 'el-icon-success';
          this.loadingText2 = '没有更多了！';
          return
        }
        try {
          // this.$refs.messageRef.scrollTop=0
          let aff = res.data.reverse()
          for (let index = 0; index < aff.length; index++) {
            const element = aff[index];
            this.messageData.unshift(element);
          }


          this.total = res.data[0].cnt

          this.$nextTick(() => {
            // 获取添加元素的高度
            // const newHeight = this.$refs.messageRef.firstElementChild.offsetHeight;
            const newHeight = this.$refs.messageRef.scrollHeight;

            // // 计算需要滚动的距离
            // const scrollDistance = newHeight;

            // 设置列表的滚动高度
            this.$refs.messageRef.scrollTop = newHeight - scrollTop;
          });
          this.showLoading2 = false;
          this.loadClass2 = 'el-icon-refresh-left';
          this.loadingText2 = '点击加载更多';
        } catch (error) {

        }

      })
    },
    // 搜索聊天内容
    onSearch(vlaue) {
      // this.messageData=[]
      // this.self=this.accountData.avatar
      // this.total=this.chatWithObj.cnt
      // console.log(this.offset >  Math.ceil(this.total / 20))
      // if(this.offset >  Math.ceil(this.total / 20)){
      //     this.loadClass = 'el-icon-success';
      //     this.loadingText = '到底了，没有更多了！';
      //   return
      // }
      let data = ''
      if(this.chatWithObj.group_id){
        data = {
          // recovery: this.recover,
          // proof_num: this.chatWithObj.proof_num,
          // account_id: Number(this.accountData.account_id),
          // model: 'other_app',
          // username: this.chatWithObj.username,
          // searchkey: this.searchWord,
          // offset: this.offset,
          // limit: this.limit,
          // selectType: this.selectType, //0下1上
          // selectTime: this.selectTime,
          // isExistsSelectID: this.isExistsSelectID,
          // chatContentID: this.selectld
          group_id: this.chatWithObj.group_id,
          account: this.chatWithObj.account,
          proof_num: this.chatWithObj.proofNum,
          limit:this.limit,
          offset: this.offset
        }
      }else{
data = {
          // recovery: this.recover,
          // proof_num: this.chatWithObj.proof_num,
          // account_id: Number(this.accountData.account_id),
          // model: 'other_app',
          // username: this.chatWithObj.username,
          // searchkey: this.searchWord,
          // offset: this.offset,
          // limit: this.limit,
          // selectType: this.selectType, //0下1上
          // selectTime: this.selectTime,
          // isExistsSelectID: this.isExistsSelectID,
          // chatContentID: this.selectld
          friend_id: this.chatWithObj.friend_id,
          account: this.chatWithObj.account,
          proof_num: this.chatWithObj.proofNum,
          limit:this.limit,
          offset: this.offset
      }
      }
      
      console.log(this.chatWithObj,data)
      searchFunction(data, '/chat/dingdingmsg').then(res => {
        if (res.data.length == 0) {
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
          return
        }
        try {
          // this.$refs.messageRef.scrollTop=0
          for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index];
            this.messageData.push(element);
          }
          this.total = res.data[0].cnt
        } catch (error) {

        }

      })
    },
    // 查看无法解析的消息类型详情
    viewsErroMessagesDetails(item) {
      this.unKnowData = item
      this.erroMessageModel = true
    },
    // 查看名片
    viewsFriendCard(data) {
      this.card = data
      this.modal2Visible = true
    },
    // 查看分享聊天记录
    viewsMessageFriendList(item) {
      this.messageRDataList = item.msg
      this.MessageFriendContentVisible = true
    },
    // 播放语音
    playAudioFile() {
      this.icon = 'el-icon-video-pause'
      let that = this
      setTimeout(function () {
        that.icon = 'el-icon-video-play'
      }, 2000)
    },
    detailsAuideInfo(item) {
      this.visibleAudio = true
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visibleAudio = false;
        this.confirmLoading = false;
      }, 500);
    },
    handleCancel(e) {
      this.visibleAudio = false;
    },
    handleOkMessageFriend() {
      this.MessageFriendContentVisible = false;
    },
    handleCancelMessageFriend() {
      this.MessageFriendContentVisible = false;
    },
    // 聊天内容分页
    handleSizeChange(val) {
      this.limit = val
      this.onSearch()
    },
    handleCurrentChange(val) {
      this.offset = val
      this.onSearch()
    }
  }
};
</script>
<style >
.el-icon-circle-close {
  color: #Fff;

}
</style>
<style scoped>
.loadingBoxbottom {
  float: left;
  width: 100%;
  text-align: center;
}

.badgeBox {
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff !important;
  background: #f56c6c;
  text-align: center !important;
  line-height: 23px;
  /* position: absolute; */
  padding-left: 5px;
  float: right;
  font-size: 12px;
  /* display: inline-block; */
  /* top: -10px;
  right: -40px; */
}

.listItem {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

.unKonw {
  cursor: pointer;
}

.videoContent {
  position: relative;
}

.itemTikTok {
  width: 240px;
  min-height: 440px;
  /* margin-left: -60px; */
  position: relative;
  left: 0;
}

.block {
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
}

#systemTips {
  text-align: center;
  margin-bottom: 10px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(146, 146, 146);
  font-size: 12px;
}

.nameCardNameTExt {
  margin-left: 20px;
}

.viewsInfoDetailsMessages {
  position: relative;
  right: -70px;
  top: 0px;
  font-size: 13px;
  font-weight: none;
  text-decoration: underline;
  color: #409eff;
  cursor: pointer;
}

.viewsInfoDetailsMessages:hover {
  color: #0616f5;
}

.cardContent {
  height: 100px;
  display: flex;

}

.cardTextInfo {
  padding-left: 20px;
}

.cardTextInfo>p {
  margin-bottom: 3px;
  font-size: 14px;
}

.grefTitleSpan {
  display: block;
  width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hrefBox {
  width: 250px;
  height: 47px;
  display: flex;
  align-items: center;
}

.hrefBox>div {
  height: 50px;
}

.hrefBoxLeftBox {
  width: 180px;
}

.hrefBoxrightBox {
  width: 40px;
  margin: 0 !important;
}

.hrefBoxContentDeatils {
  width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.textInfo {
  float: left;
  width: 230px;
  margin: 0 !important;
  border-top: 1px solid #ccc;
  padding-top: 2px !important;
}

.block {
  text-align: center;
}

.listBox {
  display: block;
  min-height: 700px;
  overflow-y: auto;
}

.chatRecordDate {
  width: 100px;
  height: 60px;
  line-height: 60px;
  font-size: 12px;
}

.chatRecordContentLeft {
  height: 60px;
  width: 290px;
  padding-left: 20px;
}

.friendNamesContent {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friendNames {
  height: 30px;
  line-height: 30px;
}

.chatRecordContent {
  min-height: 60px;
  width: 400px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(231, 231, 231);
  /* background: #409eff; */
}

.chatRecord {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.friendAvatar {
  width: 60px;
  height: 60px;
}

.bottomName {
  border-top: 1px solid #ccc;
  float: left;
  height: 20px;
  width: 100%;
  margin: 0 !important;
  text-indent: 0px;
  margin-top: 5px !important;

}

.titleMessageBoxBox {
  display: block;
  padding-left: 12px;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

p {
  margin: 0;
}

#playAudio {
  position: absolute;
  font-size: 23px;
  color: #dfdfdf;
  top: 34.5%;
  left: 34.5%;
  cursor: pointer;
  margin: auto;
}

.bottomBorder {
  border-bottom: 1px solid rgb(224, 224, 224);
}

.AudioLogo {
  position: relative;
  width: 78.14px;
  height: 78.14px;
  background: #e2e2e2;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.itemAudio {
  height: 39px;
  background: #f3f3f3;
  width: 625.18px;
  padding: 9.3px;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pathBox {
  height: 100px;
}

.audioBox {
  width: 100%;
  height: 100px;
  display: flex;
  padding: 0 15px;
}

.infoYuYin {
  position: absolute;
  top: -7px;
  right: -7px;
  color: rgb(192, 192, 192);
  transition: .1s linear;
}

.infoYuYin:hover {
  color: #409eff;
  transition: .1s linear;
  transform: scale(1.1);
}

.yuyin {
  cursor: pointer;
  position: relative;
  width: 60%;
}

.nameSiren {
  height: 15.6px;
  width: 250px;
  float: left;
  margin: 0 !important;
  border-top: 1px solid rgb(219, 219, 219);
  text-indent: 18px;
}

.contentNameCard {
  height: 56.26px;
  width: 100%;
  padding: 10px 20px;
  display: flex;
}

.nameCard {
  width: 250px;
  height: 73.6px;
  background: rgb(243, 243, 243);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  cursor: pointer;
}

.hongbaotext {
  position: absolute;
  right: 25px;
  top: 15px;
  color: #Fff;

}

.fenyeqi {
  /* float: left; */
  margin-top: 10px;
}

.mainContentBoxMessage {
  height: 500px;
}

.mapBox {
  width: 100px;
  height: 80px;
  /* float: left; */
}

.mapTitle {
  width: 100%;
  height: 50px;
  padding: .03rem;
  float: left;

}

.map {
  width: 233px;
  height: 206px;
  background: #fff;
  border-radius: 4px;
}

.messageImg {
  display: block;
  width: 100%;
  height: 100%;
}

.chat-sender {
  margin-top: 0 !important;
}

.messageBoxFather {
  width: 100%;
  /* min-width:429px; */
  min-height: 785px;

}

.messageBox {
  margin: 0 auto;
  padding: 10px 20px;
  background: rgb(253, 253, 253);
  height: 99vh;
  overflow-y: auto;
  border-radius: 5px;
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) */
}

.messageContentTitle {
  height: 56.26px;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.friendName {
  line-height: 22.39px;
  font-size: 13px;
}
</style>

<style scoped>
.leftMessage {}

/* 气泡样式 */
body {
  background-color: #ebebeb;
  font-family: -apple-system;
  font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI",
    sans-serif;
}

.chat-sender {
  clear: both;
  font-weight: bold;
}

.chat-sender div:nth-of-type(1) {
  float: left;
}

.chat-sender div:nth-of-type(2) {
  margin: 0 20px 2px 50px;
  padding: 0px;
  color: #848484;
  font-size: 60%;
  text-align: left;
}

.chat-sender div:nth-of-type(3) {
  background-color: rgb(233, 233, 233);
  float: left;
  max-width: 250px;
  margin: 0 20px 10px 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
  text-indent: -12px;
}

.chat-receiver {
  clear: both;
  font-weight: bold;
}

.chat-receiver div:nth-of-type(1) {
  float: right;
}

.chat-receiver div:nth-of-type(2) {
  margin: 0px 50px 2px 50px;
  padding: 0px;
  color: #848484;
  font-size: 60%;
  text-align: right;
}

.chat-receiver div:nth-of-type(3) {
  float: right;
  max-width: 250px;
  background-color: #b2e281;
  margin: 0px 10px 10px 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
}

.chat-receiver div:first-child img,
.chat-sender div:first-child img {
  width: 40px;
  height: 40px;
  /*border-radius: 10%;*/
}

.chat-left_triangle {
  height: 0px;
  width: 0px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent rgb(233, 233, 233) transparent transparent;
  position: relative;
  left: -22px;
  top: 3px;
  overflow: hidden;
}

.chat-right_triangle {
  height: 0px;
  width: 0px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #b2e281;
  position: relative;
  right: -22px;
  top: 3px;
}

.chat-notice {
  clear: both;
  font-size: 70%;
  color: white;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}

.chat-notice span {
  background-color: #ececec;
  line-height: 25px;
  border-radius: 5px;
  padding: 5px 10px;
}

.messageBox::-webkit-scrollbar {
  width: 8px;
}

/* <!--修改 滚动条的 下面 的 样式--> */
.messageBox::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

/* <!--修改 滑块 --> */
.messageBox::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.hongbaotext {
  position: absolute;
  right: 50px;
  top: 40px;
  color: #Fff;
}

/* 当屏幕宽度大于2560时 */
@media screen and (min-width: 2360px) {
  .nameSiren {
    height: 0.06rem;
    width: 1rem;
    float: left;
    margin: 0 !important;
    border-top: 1px solid rgb(219, 219, 219);
    text-indent: .07rem;
  }

  .contentNameCard {
    height: 0.24rem;
    width: 100%;
    padding: 10px 20px;
    display: flex;
  }

  .nameCard {
    width: 1rem;
    height: .31rem;
    background: rgb(243, 243, 243);
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    cursor: pointer;
  }

  .hongbaotext {
    position: absolute;
    width: 150px;
    right: .15rem;
    top: .1rem;
    color: #Fff;
    font-size: 13px;
  }

  .messageBox {
    margin: 0 auto;
    /* width: 1.7rem; */
    height: 90%;
    padding: 10px 20px;
    background: rgb(253, 253, 253);
    /* height: 4.54rem; */
    max-height: 81vh;
    /* height: auto; */
    /* height: 600px; */
    overflow-y: auto;
    border-radius: 5px;
    padding-bottom: 200px;
    /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
  }

  .chat-receiver div:nth-of-type(3) {
    float: right;
    max-width: 1.1rem;
    background-color: #b2e281;
    margin: 0px 10px 10px 20px;
    padding: 10px 10px 10px 10px;
    border-radius: 7px;
  }

  .chat-sender div:nth-of-type(3) {
    background-color: rgb(233, 233, 233);
    float: left;
    max-width: 1.1rem;
    margin: 0 20px 10px 10px;
    padding: 10px 10px 10px 10px;
    border-radius: 7px;
    text-indent: -12px;
  }

  .map {
    width: 1rem;
    height: 1rem;
    background: #fff;
    border-radius: 4px;
  }

  .mapTitle {
    width: 100%;
    height: .2rem;
    padding: .03rem;
    float: left;
  }

  .friendName {
    line-height: 0.1rem;
    font-size: 0.07rem;
  }

  .messageContentTitle {
    height: 0.3rem;
    width: 1.7rem;
    background: rgb(255, 255, 255);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-radius: 5px;
    border-bottom: 1px solid rgb(230, 230, 230);
    margin-bottom: 10px;
  }

  .messageBoxFather {
    width: 100%;
    min-width: 403px;

  }

  .AudioLogo {
    position: relative;
    width: .5rem;
    height: .5rem;
    background: #e2e2e2;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }

  .itemAudio {
    height: .25rem;
    background: #f3f3f3;
    width: 2.1rem;
    padding: .06rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pathBox {
    height: .5rem;
  }

  .audioBox {
    width: 100%;
    height: .5rem;
    display: flex;
    padding: 0 .1rem;
  }

  .hrefBox {
    width: 1rem;
    height: .2rem;
    display: flex;
    align-items: center;
  }

  .hrefBox>div {
    height: .2rem;
  }

  .hrefBoxLeftBox {
    width: .8rem;
  }

  .hrefBoxrightBox {
    width: .2rem;
    margin: 0 !important;
  }

  .hrefBoxContentDeatils {
    width: .7rem;
    height: .2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .textInfo {
    float: left;
    width: 1rem;
    margin: 0 !important;
    border-top: 1px solid #ccc;
    padding-top: 2px !important;
  }

  .grefTitleSpan {
    display: block;
    width: .7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #playAudio {
    position: absolute;
    font-size: .16rem;
    color: #dfdfdf;
    top: 34.5%;
    left: 34.5%;
    cursor: pointer;
    margin: auto;
  }

  .screenBox {
    height: 85vh;
    background: #fff;
    overflow: hidden;
  }
}
</style>
